<template>
  <div class="course-module">
    <div class="module-item">
      <div class="icon">
        <img src alt />
      </div>
      <div class="name">就业</div>
    </div>

    <div class="module-item">
      <div class="icon">
        <img src alt />
      </div>
      <div class="name">留学</div>
    </div>

    <div class="module-item">
      <div class="icon">
        <img src alt />
      </div>
      <div class="name">移民</div>
    </div>

    <div class="module-item">
      <div class="icon">
        <img src alt />
      </div>
      <div class="name">充电</div>
    </div>

    <div class="module-item">
      <div class="icon">
        <img src alt />
      </div>
      <div class="name">自选</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.course-module {
  background-color: #ffffff;
  padding: 16px 30px;
  padding-top: 6px;
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .module-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    text-align: center;

    .icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        height: 20px;
      }
    }

    &:nth-child(1) {
      .icon {
        background: linear-gradient(to right bottom, #54a8fe, #3879fe);
        box-shadow: 0 2.5px 5px 0 rgba(82, 165, 254, 0.3);
      }
    }

    &:nth-child(2) {
      .icon {
        background: linear-gradient(to right bottom, #fad75b, #ffb22a);
        box-shadow: 0 2.5px 5px 0 rgba(251, 210, 84, 0.3);
      }
    }

    &:nth-child(3) {
      .icon {
        background: linear-gradient(to right bottom, #4ddf95, #13b669);
        box-shadow: 0 2.5px 5px 0 rgba(70, 218, 143, 0.3);
      }
    }

    &:nth-child(4) {
      .icon {
        background: linear-gradient(to right bottom, #fd7335, #fe4837);
        box-shadow: 0 2.5px 5px 0 rgba(253, 112, 54, 0.3);
      }
    }

    &:nth-child(5) {
      .icon {
        background: linear-gradient(to right bottom, #71a5ff, #0958e3);
        box-shadow: 0 2.5px 5px 0 rgba(154, 190, 255, 1);
      }
    }

    .name {
      color: #3478f6;
      margin-top: 7.5px;
      font-size: 14px;
    }
  }
}
</style>